import React from 'react'
import {inject, observer} from 'mobx-react';
import {Popover,Tools, Icon} from 'weaver-mobile';
import { TabPage } from 'weaver-mobile-page';
import ListMode from './ListMode';
import CategoryRoute from './CategoryRoute';
import {Route, withRouter } from 'react-router-dom';
import QueueAnim from 'rc-queue-anim';
import Doc from '../doc';
import {GetUrlParam} from '../../util/Utils'
const getLabel = Tools.getLabel;

@inject('systemDocStore')
@withRouter
@observer
class SystemDoc extends React.Component {
  componentDidMount() {
    const {systemDocStore,location} = this.props;
    let url = location.search;
    let resourceid = GetUrlParam(url,"resourceid") || '';
    let scope = GetUrlParam(url,"moduleid") || '';
    systemDocStore.setScope(scope);
    systemDocStore.init(resourceid);
  }
  render() {
    const {systemDocStore,path} = this.props, {elliVisible, viewMode, tabKey} = systemDocStore;
    return (
      <div className="wea-system-doc-whitebg">
        <Route
          key="systemDoc-doc"
          path={`/systemDoc/doc/:id`}
          render={() => {
            return (
              <QueueAnim>
                <div className="wm-route-layout" key="systemdoc-doc-div">
                  <Doc path="/systemDoc"/>
                </div>
              </QueueAnim>
            );
          }}
        />
        <TabPage
          tabs={[
            {title: getLabel(30898, '全部文档'), key: 'all'},
            {title: getLabel(1212, '我的文档'), key: 'my'},
            {title: getLabel(18030, '我的收藏'), key: 'collect'},
          ]}
          tabProps={{
            onTabClick:(tab, index) => systemDocStore.setTabKey(tab.key),
            page: tabKey
          }}
          popover={tabKey !== 'collect'}
          btns={tabKey === 'collect' ? [
            // 临时处理一下，传入了一个不存在的icon，以保证点到我的收藏时不会出现宽度变化
            <Icon type="not-existed-icon" />
          ]:[]}
          popoverProps={{
            visible:elliVisible,
            overlay: [
              <Popover.Item key="toggle">{viewMode === 'list' ? getLabel(388755, '目录模式') : getLabel(388756, "列表模式")}</Popover.Item>,
            ],
            onSelect: (tab, index) => {
            		if(tab.key == 'createDoc'){
            			systemDocStore.setEllivisible();
            			this.props.history.push(`/add/39`);
            		}else{
            			systemDocStore.setViewMode(viewMode === 'list' ? 'category' : 'list');
            		}
            		
            	},
            onVisibleChange: systemDocStore.setEllivisible,
          }}
        />
        <div className="wea-system-doc-list">
          {viewMode === 'list' || tabKey === 'collect' ?
            <ListMode /> :
            <CategoryRoute />
          }
        </div>
      </div>
    );
  }
}

export default SystemDoc;